All files / src/components/ui pagination-controls.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
 
interface PaginationControlsProps {
  page: number;
  onPageChange: (page: number) => void;
  hasNextPage: boolean;
  isLoading?: boolean;
  pageSize?: number;
  label?: string;
  className?: string;
}
 
export function PaginationControls({
  page,
  onPageChange,
  hasNextPage,
  isLoading = false,
  pageSize,
  label,
  className}: PaginationControlsProps) {
  const { t } = useTranslation(['user', 'translation']);
  const canGoBack = page > 1;
 
  return (
    <div
      className={cn(
        'mt-6 flex flex-col gap-3 border-t border-slate-800/60 pt-4 sm:flex-row sm:items-center sm:justify-between',
        className
      )}
    >
      <div>
        {label && (
          <p className="text-xs uppercase tracking-wide text-slate-500">
            {label}
          </p>
        )}
        <p className="text-sm text-slate-400">
          {pageSize
            ? t('user.pagination.showing', {
                page,
                count: pageSize})
            : t('user.pagination.current', { page })}
        </p>
      </div>
      <div className="flex items-center gap-3">
        <Button
          variant="ghost"
          size="sm"
          className="rounded-full border border-slate-600/50 bg-slate-800/60 text-slate-200 hover:bg-slate-700/80 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
          disabled={!canGoBack || isLoading}
          onClick={() => onPageChange(Math.max(1, page - 1))}
        >
          <ChevronLeft className="mr-2 h-4 w-4" />
          {t('user.pagination.previous')}
        </Button>
        <span className="px-3 py-1.5 rounded-full bg-slate-700/50 text-sm font-semibold text-white border border-slate-600/30">
          {t('user.pagination.pageLabel', { page })}
        </span>
        <Button
          variant="ghost"
          size="sm"
          className="rounded-full border border-slate-600/50 bg-slate-800/60 text-slate-200 hover:bg-slate-700/80 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
          disabled={!hasNextPage || isLoading}
          onClick={() => onPageChange(page + 1)}
        >
          {t('user.pagination.next')}
          <ChevronRight className="ml-2 h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}
 
export default PaginationControls;